import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, List, Radio} from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';

import {getParkingPackageInfo, getOrderInfoByItemID, createTakeOrder} from '~/api/order';
import {getHttpUrl} from '~/api/basic';
const RadioItem = Radio.RadioItem;
export default class MyGiftcheck extends Component {
    static navigationOptions = ({navigation}) => {
        return {
            title: '兑换商品',
            headerRight: (
                <Text
                    style={{paddingRight: 10}}
                    onPress={() => {
                        navigation.push('Changeinfo');
                    }}>
                    兑换说明
                </Text>
            ),
        };
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            id: this.props.navigation.getParam('params'),
            list: [],
            orderinfo: '',
            baseurl: '',
            ProductDatalist: [],
            orderitemlist: [],
        };
        getHttpUrl().then((r) => {
            if (r.code === 0) {
                this.setState({
                    baseurl: r.data,
                });
            }
        });

        getParkingPackageInfo({
            package_id: this.state.id,
        }).then((r) => {
            if (r.code === 0) {
                let itemlist = [];
                itemlist = r.data.item_list;
                itemlist.forEach((item, index) => {
                    item.select = true;
                    item.radioid = false;
                });
                this.setState({
                    list: itemlist,
                    orderinfo: r.data.order_info,
                });
            } else {
                Alert.alert(r.msg);
            }
        });
        console.disableYellowBox = true;
    } //
    onpress = () => {
        let orderit = [];
        this.state.list.forEach((item) => {
            if (item.select === true) {
                orderit.push(item.OrderItemID);
            }
        });
        this.setState(
            {
                orderitemlist: orderit,
            },
            () => {
                this.props.navigation.push('PackageOrder', {
                    itemid: this.state.id,
                    gifttype: 2, //1引流礼品  2车位礼品
                    giftordertype: 0, //0未领取   1已领取
                    orderlist: this.state.orderitemlist,
                    name: this.state.name,
                    mobile: this.state.Phone,
                    address: this.state.Address,
                    orderinfo: this.state.orderinfo,
                });
            },
        );

        // createTakeOrder({
        //     parking_order_id:this.state.id,
        //     item_list:orderit,
        //     receive_info: {
        //         name: this.state.name,
        //         mobile: this.state.Phone,
        //         address: this.state.Address,
        //     },
        // }).then((r) =>{
        //
        // })
    };
    render() {
        return (
            <View style={{width: '100%', height: '100%'}}>
                <ScrollView style={{flex: 1}}>
                    <Flex
                        style={{
                            width: '96%',
                            marginLeft: '2%',
                            marginRight: '2%',
                            marginTop: 10,
                        }}>
                        <Image
                            style={{
                                width: '100%',
                                aspectRatio: 1 / 0.35,
                            }}
                            source={require('~/assets/public/giftimage.png')}
                        />
                    </Flex>
                    {/*<Text*/}
                    {/*    onPress={() => {*/}
                    {/*        this.props.navigation.push('GiftCar');*/}
                    {/*    }}>*/}
                    {/*    demo*/}
                    {/*</Text>*/}
                    {/*<Text*/}
                    {/*    onPress={() => {*/}
                    {/*        this.props.navigation.push('PackageOrder');*/}
                    {/*    }}>*/}
                    {/*</Text>*/}
                    {this.state.list.map((item, index) => {
                        return (
                            <View
                                style={{
                                    marginTop: 10,
                                    marginBottom: 10,
                                    backgroundColor: 'white',
                                    height: 95,
                                    padding: 10,
                                    borderRadius: 5,
                                    width: '100%',
                                }}>
                                <Flex style={{width: '100%'}}>
                                    <Flex
                                        style={{width: '70%', borderRightWidth: 1}}
                                        onPress={() => {
                                            this.props.navigation.push('GiftInfo', {
                                                params: item.ProductDataID,
                                            });
                                        }}>
                                        <Image
                                            style={{
                                                width: '20%',
                                                height: 75,
                                                padding: 10,
                                                resizeMode: 'contain',
                                            }}
                                            source={{
                                                uri: this.state.baseurl + item.ProductImage,
                                            }}
                                        />
                                        <Flex direction="column" align="start" style={{padding: '3%', width: '60%'}}>
                                            <Text numberOfLines={1} style={{fontSize: 20}}>
                                                {item.ProductName}
                                            </Text>
                                            <Text
                                                style={{
                                                    paddingRight: 50,
                                                    fontSize: 20,
                                                    color: '#EC4F46',
                                                }}>
                                                {item.PriceMarket}元
                                            </Text>
                                        </Flex>
                                        <View style={{width: '20%'}}>
                                            <RadioItem
                                                checked={item.index === index}
                                                onChange={(event) => {
                                                    if (event.target.checked) {
                                                        let list = this.state.list;
                                                        list[index].select = !list[index].select;
                                                        list[index].radioid = list[index].select == true ? false : true;
                                                        this.setState({
                                                            list,
                                                        });
                                                    }
                                                }}>
                                                {item.select === true ? (
                                                    <Image style={{width: 24, height: 24}} source={require('~/assets/public/select2.png')} />
                                                ) : (
                                                    <Image style={{width: 24, height: 24}} source={require('~/assets/public/noselect2.png')} />
                                                )}
                                            </RadioItem>
                                        </View>
                                    </Flex>
                                    <Flex style={{width: '30%'}}>
                                        <View style={{width: '30%'}}>
                                            <RadioItem
                                                checked={item.index === index}
                                                onChange={(event) => {
                                                    if (event.target.checked) {
                                                        let list = this.state.list;
                                                        list[index].radioid = !list[index].radioid;
                                                        list[index].select = list[index].radioid == true ? false : true;
                                                        this.setState({
                                                            list,
                                                        });
                                                    }
                                                }}>
                                                {item.radioid === true ? (
                                                    <Image style={{width: 24, height: 24}} source={require('~/assets/public/select2.png')} />
                                                ) : (
                                                    <Image style={{width: 24, height: 24}} source={require('~/assets/public/noselect2.png')} />
                                                )}
                                            </RadioItem>
                                        </View>
                                        <Flex
                                            onPress={() => {
                                                this.props.navigation.push('GiftMoreList', {
                                                    productParamID: item.ProductParamID,
                                                });
                                            }}
                                            style={{width: '70%', height: '100%'}}>
                                            <Text>更多商品</Text>
                                        </Flex>
                                    </Flex>
                                </Flex>
                            </View>
                        );
                    })}
                </ScrollView>
                <Button
                    style={{height: 49}}
                    type={'warning'}
                    onPress={() => {
                        this.onpress();
                    }}>
                    确认提货
                </Button>
            </View>
        );
    }
}

const styles = StyleSheet.create({});
